<template>
    <Item v-if="Comp.show" :formkey="`${RuleValue.field}_${PropsKey}`" v-model:value="RuleValue.props[PropsKey]"
        :label="props.options.label" :codeStatus="props.options.codeStatus" :code="RuleValue.codes[PropsKey]"
        :options="options" :labelWidth="props.options.labelWidth" />
</template>
<script setup>
import Items from './Items.js'
import { ref, shallowRef, reactive, watch } from 'vue'
const props = defineProps(['FormType', 'options', 'RuleValue'])

const PropsKey = ref(props.options.key);
const Item = shallowRef(Items[props.FormType]);

const options = ref(props.options.options);

const Comp = reactive({ show: true })


watch(() => Comp.show, (value) => {
    if (!value && props.RuleValue.props[PropsKey.value]) {
        delete props.RuleValue.props[PropsKey.value]
    } else if (!!value && Object.prototype.hasOwnProperty.call(props.options, 'default')) {
        props.RuleValue.props[PropsKey.value] = props.options.default;
    }
})

const watchList = props.options.watchList;
if (watchList && watchList.length) {
    for (let i = 0; i < watchList.length; i++) {
        const element = watchList[i];
        const fn = new Function('value', 'Comp', 'Rule', element.event);
        watch(() => props.RuleValue.props[element.key], (value) => {
            fn(value, Comp, props.RuleValue)
        }, { immediate: true })
    }
}
</script>
<style scoped lang="less"></style>